import { memo, useState } from "react";
import { Button, ButtonGroup, TextField, Tooltip } from "@mui/material";
import { IUserMessage, Message } from "@/lib/types";
import PenIcon from "@/assets/icons/pen.svg?jsx";
import PersonIcon from "@/assets/icons/person.svg?jsx";
import ClipboardIcon from "@/assets/icons/clipboard.svg?jsx";

type UserMessageProps = {
  message: Message<IUserMessage>;
  onEditConfirm: (prompt: string, parent: string | null) => void;
};

function UserMessage(props: UserMessageProps) {
  const { message, onEditConfirm } = props;
  const [edit, setEdit] = useState({ open: false, value: "" });

  return (
    <div className="group flex w-full gap-x-4 [&:not(:first-child)]:mt-4">
      <div className="flex-none">
        <PersonIcon height={24} width={24} />
      </div>
      <div className="flex-auto rounded-lg bg-[#363A48] p-5">
        {edit.open ? (
          <>
            <TextField
              value={edit.value}
              onInput={(e) =>
                setEdit({
                  ...edit,
                  value: (e.target as HTMLTextAreaElement).value,
                })
              }
              multiline
              fullWidth
              variant="standard"
              minRows={2}
              maxRows={4}
              InputProps={{
                disableUnderline: true,
              }}
            />
            <div className="mt-2 flex justify-end">
              <Button
                size="small"
                onClick={() => setEdit({ open: false, value: "" })}
              >
                取消
              </Button>
              <Button
                size="small"
                variant="contained"
                onClick={() => {
                  onEditConfirm(edit.value, message.parent);
                  setEdit({ open: false, value: "" });
                }}
              >
                提交
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className="mb-2">{message.message.content}</div>
            <div className="flex justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100">
              <ButtonGroup
                variant="text"
                size="small"
                sx={{
                  "& .MuiButtonGroup-firstButton": { border: "none" },
                  "& .MuiButtonGroup-middleButton": { border: "none" },
                }}
              >
                <Tooltip title="编辑">
                  <Button
                    onClick={() =>
                      setEdit({ open: true, value: message.message.content })
                    }
                  >
                    <PenIcon height={16} width={16} />
                  </Button>
                </Tooltip>
                <Tooltip title="复制">
                  <Button
                    onClick={() => {
                      navigator.clipboard.writeText(message.message.content);
                    }}
                  >
                    <ClipboardIcon height={16} width={16} />
                  </Button>
                </Tooltip>
              </ButtonGroup>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default memo(UserMessage);
